<template>
  <m-container class="app-layout am-clip-circle" direction="horizontal">
    <m-sider class="app-sider"
      :class="{
        'is-close': navigation.isClose,
        'is-moving': navigation.isMoving,
        'is-mini': navigation.isMini
      }"
      :style="{
        width: navigation.width + 'px'
      }"
      >
      <app-aside />
    </m-sider>
    <m-sider class="app-sider-control"
      @mousedown.native="handleMousedown"
      >
      <button class="collapse-btn"
        :class="{'close': navigation.isClose}"
        @click="toggleNavigation"
        ></button>
    </m-sider>
    <m-container style="overflow: hidden;">
      <m-header class="app-header"><AppHeader /></m-header>
      <m-main class="app-content">
        <transition appear name="m-page" mode="out-in">
          <router-view />
        </transition>
      </m-main>
      <!-- <m-footer class="app-footer">footer</m-footer> -->
    </m-container>
  </m-container>
</template>

<script>
import { MContainer, MMain, MHeader, MSider } from './layout'
import AppAside from './app-aside'
import AppHeader from './app-header'

export default {
  components: {
    MContainer,
    MMain,
    MHeader,
    MSider,
    AppAside,
    AppHeader
  },
  data () {
    return {
      navigation: {
        isClose: false,
        isMoving: false,
        isMini: false,
        width: 240
      }
    }
  },
  methods: {
    toggleNavigation () {
      if (this.navigation.isClose) {
        this.navigation.isClose = false
        this.navigation.width = typeof this.navigation.oldWidth !== 'undefined' ? this.navigation.oldWidth : 240

        if (this.navigation.isMini) {
          this.navigation.isMini = false
        }
      } else {
        this.navigation.isClose = true
        this.navigation.oldWidth = this.navigation.width
        this.navigation.width = 0
      }
    },
    docMousemove (event) {
      // console.log(event)
      const offsetX = event.clientX - this.navigation.start.clientX
      let width = this.navigation.start.offsetWidth + offsetX

      if (width < 50) {
        this.navigation.isClose = true
        width = 0
      } else if (width > 60 && width < 100) {
        this.navigation.isMini = true
        this.navigation.isClose = false
        width = 60
      } else {
        this.navigation.isMini = false
        this.navigation.isClose = false
      }

      if (width > 1000) {
        width = 1000
      }

      this.navigation.width = width
    },
    docMouseUp () {
      this.navigation.isMoving = false
      this.removeListen()
    },
    handleMousedown (event) {
      event.preventDefault()
      event.stopPropagation()

      this.navigation.start = {
        clientX: event.clientX,
        offsetWidth: this.navigation.width || 0
      }
      this.navigation.isMoving = true
      document.addEventListener('mousemove', this.docMousemove, false)
      document.addEventListener('mouseup', this.docMouseUp, false)
      this.removeListen = () => {
        document.removeEventListener('mousemove', this.docMousemove)
        document.removeEventListener('mouseup', this.docMouseUp)
      }
    },
    serialize () {
      localStorage.setItem('navigation', JSON.stringify(this.navigation))
    }
  },
  created () {
    try {
      const data = JSON.parse(localStorage.getItem('navigation'))
      if (typeof data === 'object' && data !== null) {
        this.navigation = data
      }
    } catch (err) {
      console.log(err)
    }
  },
  mounted () {
    window.removeEventListener('blur', this.serialize)
    window.addEventListener('blur', this.serialize, false)
  }
}
</script>
